<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form
      ref="form"
      size="mini"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
        <el-form-item label="加工单号" class="myform-item">
          <el-input
            v-model="form.processing_code"
            placeholder="请输入加工单号"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="SKU:" class="myform-item">
          <el-input
            v-model="form.sku_code"
            placeholder="请输入SKU"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="工厂名:" class="myform-item">
          <el-input
            v-model="form.factory_name"
            placeholder="请输入工厂名"
            @keyup.enter.native="onSearch"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <!-- <el-button type="primary" @click="onAdd">新增面料</el-button> -->
        </el-form-item>
      </div>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :height="browserHeight - 250"
      :summary-method="getSummaries"
      show-summary
      border
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      
      <el-table-column
        label="成品加工单号"
        align="center"
        prop="processing_code"
        width="140"
      >
        <template slot-scope="{ row }">
          <div>
            <div>{{ row.processing_code }}</div>
            <!-- <div
              style="padding: 4px; color: #ffffff"
              :style="{ background: row.f_status == 0 ? 'red' : '#67C23A' }"
            >
              {{ row.f_status == 0 ? "进行中" : "已完成" }}
            </div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="款号"
        align="center"
        prop="type_no"
        width="140"
      >
      </el-table-column>
      
      <el-table-column label="SKU" align="center" prop="sku_code" width="140">
      </el-table-column>
     
      <el-table-column label="供应商" align="center" prop="factory_name">
      </el-table-column>
      <el-table-column label="件数" align="center" prop="num">
      </el-table-column>
      
      <el-table-column label="理单人" align="center" prop="order_processor">
      </el-table-column>
      
      <el-table-column label="绣花厂" align="center" prop="embroidery_factory">
      </el-table-column>
    </el-table>
    <!-- <div style="margin-top: 10px">
      <el-button
        type="primary"
        :disabled="!multipleSelection.length"
        size="mini"
        @click="onCreate(1)"
        >生成RFID</el-button
      >
      <el-button
        type="primary"
        :disabled="!multipleSelection.length"
        size="mini"
        @click="onCreate(2)"
        >无需生成RFID</el-button
      >
      <el-dialog
        title="发起采购退货"
        :visible.sync="dialogVisible"
        width="800px"
      >
        <div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <div>成品加工单：{{ row.processing_code }}</div>
            <div>供应商：{{ row.factory_name }}</div>
          </div>
          <el-table
            height="300"
            :data="tableReturn"
            border
            size="mini"
            style="width: 100%"
            ref="textDocRef"
            @selection-change="handleSelectionChangeTH"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="type_no" align="center" label="款号">
            </el-table-column>
            <el-table-column prop="type_name" align="center" label="款名">
            </el-table-column>
            <el-table-column prop="sku_code" align="center" label="SKU">
            </el-table-column>
            <el-table-column prop="num" align="center" label="计划退货数">
              <template slot-scope="{ row, $index }">
                <el-input
                  type="number"
                  v-model="row.num"
                  placeholder="0"
                  size="mini"
                  @input="onInput($event, row, $index)"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button
            type="primary"
            :disabled="!multipleSelection.length"
            @click="onOK"
            size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div> -->

    <pagination
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminCodeGetpocessingcodelist"
    />
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleList"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  postAdminCodeGetpocessingcodelist,
  postAdminCodeSetpocessingcodestatus,
  postAdminCodeSetJushuitanPurchaseUpload_shou,
  postAdminOmsaddWarehousingProcessing,
  postAdminOmscancelProcessing,
  postAdminOperatesave_processing_order,
  postAdminOmsGetProType,
  postAdminOmsSetPurchaseReturn,
  postAdminCodeSetpocessingFstatus,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogVisibleList:false,
      browserHeight: "",
      savetime: "",
      options: [
        {
          value: "0",
          label: "未设置",
        },
        {
          value: "1",
          label: "已生成",
        },
        {
          value: "2",
          label: "无需生成",
        },
      ],
      optionsWJ: [
        {
          value: "0",
          label: "进行中",
        },
        {
          value: "1",
          label: "完结",
        },
      ],
      form: {
        processing_code: "",
        sku_code: "",
        is_create: "",
        f_status: "",
        factory_name: "",
        str_add_date: "",
        end_add_date: "",
        page: 1,
        size: 10,
      },

      multipleSelection: [],
      tableData: [],
      total: 1,
      row: "",
      tableReturn: [],
      multipleSelection: [],
    };
  },
  activated() {
    this.browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    let form = this.form;
    this.postAdminCodeGetpocessingcodelist(form);
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    // 结案
    onPocessingFstatus(row) {
      let _this = this;
      let data = {
        processing_code: row.processing_code,
      };
      this.$confirm("确定结案?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await postAdminCodeSetpocessingFstatus(data);
            _this.postAdminCodeGetpocessingcodelist(form);
          } catch (error) {}
        })
        .catch(() => {});
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          !values.every((value) => isNaN(value)) &&
          (column.label == "件数" ||
            column.label == "入库数" ||
            column.label == "未入库数")
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index];
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    cellStyle(row) {
      if (row.column.label == "未入库数") {
        return {
          color: "red",
          background: "#F5F7FA",
        };
      }
    },
    headerCellStyle(row) {
      console.log("row", row);
      if (row.column.label == "未入库数") {
        return {
          color: "red",
          background: "#F5F7FA",
        };
      }
    },
    ClickQty(row) {
      if (row.processing_code)
        return this.$router.push({
          name: "ContractReturnNote",
          params: { processing_code: row.processing_code },
        });
      return;
    },
    onInput(e, row, index) {
      console.log(e);
      e = e.replace(/[^0-9.]/g, "");
      let { tableReturn, multipleSelection } = this;
      let tmpObj = tableReturn[index];
      tmpObj.num = e;
      this.$set(this.tableReturn, index, tmpObj);
      for (let idx = 0; idx < multipleSelection.length; idx++) {
        if (multipleSelection[idx] == row) {
          multipleSelection[idx] = row;
        }
      }
      this.multipleSelection = multipleSelection;
    },
    onChangeInput(row) {
      this.$refs.textDocRef.toggleRowSelection(row);
    },
    handleSelectionChangeTH(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    // 采购退货确认
    async onOK() {
      let { multipleSelection } = this;
      let obj = {
        arrlist: multipleSelection,
      };
      try {
        let res = await postAdminOmsSetPurchaseReturn(obj);
        this.$message.success("创建成功");
        this.dialogVisible = false;
      } catch (error) {}
    },
    // 采购退货
    async onReturn(row) {
      this.row = row;
      let obj = {
        processing_code: row.processing_code,
      };
      let res = await postAdminOmsGetProType(obj);
      let tableReturn = res.data;
      tableReturn = tableReturn.map((e) => {
        e.num = 0;
        return e;
      });
      this.tableReturn = tableReturn;
      this.multipleSelection = [];
      this.dialogVisible = true;
    },
    onUpdate() {
      this.loading = true;
      let form = this.form;
      postAdminOperatesave_processing_order().then((res) => {
        this.postAdminCodeGetpocessingcodelist(form);
      });
    },
    // 推送聚水潭
    // onPush(id) {
    //   let obj = {
    //     id,
    //   };
    //   let form = this.form;
    //   this.$confirm(`确定推送聚水潭?`, "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       postAdminCodeSetJushuitanPurchaseUpload_shou(obj).then((res) => {
    //         this.$message({
    //           type: "success",
    //           message: "成功",
    //         });
    //         this.postAdminCodeGetpocessingcodelist(form);
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消推送",
    //       });
    //     });
    // },
    // 取消
    onCancel(processing_code) {
      let obj = {
        processing_code,
      };
      let form = this.form;
      this.$confirm(`确定取消推送OMS?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminOmscancelProcessing(obj).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功",
            });
            this.postAdminCodeGetpocessingcodelist(form);
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消推送",
          // });
        });
    },
    // 推送
    onPush(processing_code) {
      let obj = {
        processing_code,
      };
      let form = this.form;
      this.$confirm(`确定推送OMS?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          postAdminOmsaddWarehousingProcessing(obj).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.postAdminCodeGetpocessingcodelist(form);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消推送",
          });
        });
    },
    // 生成RFID
    onCreate(e) {
      let { multipleSelection, form } = this;
      this.$confirm(`确定${e == 1 ? "生成RFID" : "无需生成RFID"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            ids: [],
            status: e,
          };
          multipleSelection.forEach((res) => {
            obj.ids.push(res.id);
          });
          postAdminCodeSetpocessingcodestatus(obj).then((res) => {
            this.$message({
              type: "success",
              message: "成功",
            });
            this.postAdminCodeGetpocessingcodelist(form);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 列表
    async postAdminCodeGetpocessingcodelist(data) {
      this.loading = true;
      this.form = data;
      let date = data.str_add_date;
      if (date) {
        if (Array.isArray(date)) {
          this.form.str_add_date = date[0];
          this.form.end_add_date = date[1];
        }
      } else {
        this.form.str_add_date = "";
        this.form.end_add_date = "";
      }
      this.$refs.multipleTable.clearSelection();
      postAdminCodeGetpocessingcodelist(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.savetime = res.savetime;
          let data = res.data;
          for (let index = 0; index < data.length; index++) {
            data[index].wrks = data[index].num - data[index].qty;
          }
          this.tableData = data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    onSearch() {
      this.form.page = 1;
      this.form.size = 10;
      this.postAdminCodeGetpocessingcodelist(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
